<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .error{
            color:red
        }
        .success{
            color: green;
        }

    </style>
</head>
<body>
    <div id="app">
        <div>
            用户名 <input type="text" v-model="username"> <span :class="usernameclass">{{usernametip}}</span>
        </div>
        <div>
            密码  <input type="text" v-model="userpwd" />
            <span :class="userpwdclass" v-html="userpwdtip"></span>
        </div>
        <div>
            手机号  <input type="text" v-model="usertel" />
            <span :class="usertelclass">{{userteltip}}</span>
        </div>
        <button @click="submit">提交</button>

    </div>
    
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            username:"",
            usernametip:"请输入数字字母_$组成长度6到12位不能以数字开头",
            usernameclass:"error",
            usernamereg:/^[a-z$_][0-9a-z_$]{5,11}$/i,  
            // username:{value:"",class:"error",tip:"",reg:/^$/}

            userpwd:"",
            userpwdtip:"请输入数字字母组成长度6到10位",
            userpwdclass:"error",
            userpwdreg:/^[0-9a-z]{6,10}$/i,

            usertel:"",
            userteltip:"请输入常用的手机号",
            usertelclass:"error",
            usertelreg:/^1[3-9][0-9]{9}$/
        },
        methods:{
            submit(){
                //所有的判断都通过了才能提交
                if(this.usernameclass == "success"&&this.userpwdclass == "success"&&this.usertelclass == "success"){
                    alert("验证通过 可以写入数据库")

                }else{
                    alert("请查看红色提示");
                }
            },

            checkAtrr(attr,tip){
                if(this[attr+"reg"].test(this[attr])){
                    this[attr+"tip"] = "√";
                    this[attr+"class"]= "success";
                    return true;
                }else{
                    this[attr+"tip"] = tip;
                    this[attr+"class"]= "error";
                    return false;
                }
            },
            checkUserpwd(){//检查密码的强度
                if(this.checkAtrr("userpwd","请输入数字字母组成长度6到10位")){
                        //一切都对了 然后检查强度
                        let numReg = /[0-9]/;
                        let lowReg = /[a-z]/;
                        let uppReg = /[A-Z]/;

                        let  count  = numReg.test(this.userpwd) + lowReg.test(this.userpwd)+uppReg.test(this.userpwd);

                        let tip ="";
                        
                        switch(count){
                            case  1:
                                tip = "<button style='width:50px'>弱</button>";
                                break;
                            case  2:
                                tip = "<button style='width:50px'>中</button><button style='width:50px'>中</button>";
                                break;
                            case  3:
                                tip="<button style='width:50px'>强</button><button style='width:50px'>强</button><button style='width:50px'>强</button>";
                                break;    
                        }
                        this.userpwdtip = tip;
                }


            }

        },
        watch:{
            username(){
                this.checkAtrr("username","请输入数字字母_$组成长度6到12位不能以数字开头")
            },
            userpwd(){
                this.checkUserpwd();
              
            },
            usertel(){
                this.checkAtrr("usertel","请输入常用的手机号");
            
            }
        }
    })
//封装 继承 多态 (oop)
// jquery("#red").html();  jquery("#red").html("66666"); 
// $("#red").css("color")  $("#red").css("color","red")    $("#red").css({color:"red"})
</script>

</html>